{% extends "article/base.html" %}
{% load staticfiles %}
{% block title %}article column{% endblock %}
{% block content %}
<link rel="stylesheet" href="{% static 'editor/css/style.css' %}">
<link rel="stylesheet" href="{% static 'editor/css/editormd.css' %}">
<div style="margin-left:10px">
    <form class="form-horizontal" action="." method="post">{% csrf_token %}
        <div class="row" style="margin-top: 10px;">
            <div class="col-md-2 text-right"><span>标题:</span></div>
            <div class="col-md-10 text-left">{{article_post_form.title}}</div>
        </div>
        <div class="row" style="margin-top: 10px;">
            <div class="col-md-2 text-right"><span>栏目:</span></div>
            <div class="col-md-10 text-left">
                <select id="which_column">
                    {% for column in article_columns %}
                    <option value="{{column.id}}">{{column.column}}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
        <div class="row" style="margin-top: 10px;">
            <div class="col-md-2 text-right"><span>文章标签：</span></div>
            <div class="col-md-10 text-left">
                {% for tag in article_tags %}
                <label class="checkbox-inline">
                    <input class="tagcheckbox" type="checkbox" id="{{ tag.id }}" name="article_tag" value="{{ tag.tag }}">{{ tag.tag }}
                </label>
                {% empty %}
                <p>你没有为文章设置标签。请<a href="{% url 'article:article_tag' %}">设置标签</a></p>
                {% endfor %}
            </div>
        </div>
        <div class="row" style="margin-top: 10px;">
            <div class="col-md-2 text-right"><span>内容:</span></div>
            <!-- <div class="col-md-10 text-left">{{article_post_form.body}}</div> -->
            <div id="editormd" class="col-md-10 text-left">
                <textarea style="display:none;" id="id_body"></textarea>
            </div>
        </div>
        <div class="row">
            <input type="button" class="btn btn-primary btn-lg" value="发布" onclick="publish_article()">
        </div>
    </form>
</div>
<script type="text/javascript" src='{% static "js/jquery.js" %}'></script>
<script type="text/javascript" src="{% static 'js/layer.js'%}"></script>
<script type="text/javascript" src='{% static "editor/editormd.min.js" %}'></script>
<script type="text/javascript" src="{% static 'js/json2.js' %}"></script>
<script type="text/javascript">
    function publish_article(){
        var title = $("#id_title").val();
        var column_id = $("#which_column").val();
        var body = $("#id_body").val();
        var article_tags = [];
        $.each($("input[name='article_tag']:checked"), function(){article_tags.push($(this).val());});
        $.ajax({
            url: "{% url 'article:article_post' %}",
            type: "POST",
            data: {"title": title, "body": body, "column_id": column_id, "tags": JSON.stringify(article_tags)},
            success: function(e){
                if(e=="1"){
                layer.msg("成功");
                    location.href = "{% url 'article:article_list' %}";
                }else if(e=="2"){
                layer.msg("失败") ;
                }else{
                layer.msg("是不是有没有填写的项目？都必须写，不能空。");
                }
            },
        });
    }
    $(function () {
        var editor = editormd("editormd", {
            width: "100%",
            height: 640,
            syncScrolling: "single",
            path: "{% static 'editor/lib/' %}"
        });
    });
</script>
{% endblock %}